<template>
  <div>
    <a-menu
      :openKeys="openKeys"
      v-model.trim="selectedKeys"
      :unique-opened="false"
      mode="inline"
      :theme="GLOBAL_THEME"
      @openChange="onOpenChange"
      @select="menuSelect"
    >
      <template v-for="item in mesMenu">
        <a-menu-item v-if="item.childList.length == 0" :key="item.path">
          <a-icon :type="item.iconFlag" />
          <span>{{ item.name }}</span>
        </a-menu-item>
        <sub-menu v-else :key="item.id" :menu-info="item" />
      </template>
    </a-menu>
  </div>
</template>

<script>
import { filterMenu } from "@/unit/tool";
import { Menu } from "ant-design-vue";
import { createNamespacedHelpers } from "vuex";
const { mapState } = createNamespacedHelpers("menu/");
const SubMenu = {
  template: `
      <a-sub-menu :key="menuInfo.id" v-bind="$props" v-on="$listeners">
        <span slot="title">
           <a-icon :type="menuInfo.iconFlag" /><span>{{ menuInfo.name }}</span>
        </span>
        <template v-for="item in menuInfo.childList">
          <a-menu-item v-if="item.childList.length == 0" :key="item.path">
             <a-icon :type="item.iconFlag" />
            <span>{{ item.name }}</span>
          </a-menu-item>
          <sub-menu v-else :key="item.id" :menu-info="item" />
        </template>
      </a-sub-menu>
    `,
  name: "SubMenu",
  // must add isSubMenu: true 此项必须被定义
  isSubMenu: true,
  props: {
    // 解构a-sub-menu的属性，也就是文章开头提到的为什么使用函数式组件
    ...Menu.SubMenu.props,
    // Cannot overlap with properties within Menu.SubMenu.props
    menuInfo: {
      type: Object,
      default: () => ({}),
    },
  },
};

export default {
  components: {
    "sub-menu": SubMenu,
  },
  data() {
    return {
      collapsed: false,
      selectedKeys: [this.$route.path],
      openKeys: [],
      rootSubmenuKeys: ["/user"],
      vArr: [],
    };
  },
  watch: {
    "$route.path": function() {
      this.selectedKeys = [this.$route.path];
    },
  },
  computed: {
    ...mapState(["menuLists", "moduleId"]),
    // 菜单数据
    mesMenu() {
      let arr = JSON.parse(JSON.stringify(this.menuLists));
      return filterMenu(arr);
    },
    GLOBAL_THEME() {
      return this.$store.state.mes.GLOBAL_THEME;
    },
  },
  mounted() {
    this.openKeys.push(this.moduleId);
    
    // this.findParent([], "/user", this.mesMenu);
  },

  methods: {
    // 菜单展开回调
    onOpenChange(openKeys) {
      if (openKeys.length !== 0) {
        this.openKeys = [openKeys[openKeys.length - 1]];
      } else {
        this.openKeys = [];
      }
    },
    menuSelect({ item, key }) {
      window.localStorage.removeItem("queryParam");
      // 获取到当前的key,并且跳转
      this.$router.push({
        path: key,
      });
      this.$forceUpdate();
    },
  },
};
</script>

<style></style>
